function plotGraph(){
	console.log("plot graph");
	  switch($( "#tabs" ).tabs( "option", "active" ))
      {
          case 0:
        	  console.log("plot line");
        	  if(!bLine)
        		  plotLineGraph();
        	  break;
          case 1: 
        	  if(!bOHLC)
        		  	plotOHLCGraph();
        	 console.log("plot OHLC");
          break;
          case 2: 
        	  if(!bCandle)
        		  plotCandlestickGraph();
        	  console.log("plot candle");
        	  break;
          default: 
        	  alert("You did something wrong");
      }
}

function plotLineGraph(){  

  console.log("Plot");
 
  bLine = true;
	_lineChart = new Highcharts.StockChart({
        chart: {
           renderTo: 'lineGraphContainer',
           
        },
        title: {
           text: m_Stock.stockName
        },
        legend: getLegend(),
  
        rangeSelector : {
            selected : 2
        },
       
        yAxis: [{
	        title: {
	            text: 'Equity curve'
	        },
	        height: 200,
	        lineWidth: 2
	    },
	    yAxisATR()
	    ],
        
        series : [ 
                getSerie('line',  m_Stock.stockName,  m_Stock.Transactions,"normalSerie"), 
 	 			getSerie('line',  m_Stock.stockName + ' calculated',  m_Stock.CalculatedTransactions),
 	 			getATR(),
 	 			setFlags(m_Stock.stopDates,"P","Paper trading"),
 	 			setFlags(m_Stock.startDates,"L","Live trading")
 		]
 
     });
}

function setFlags(dates, symbol,text){
	 
	return {
		name : text,
		type : 'flags',
        data :getFlags(dates,symbol, text),
        onSeries : 'normalSerie',
        shape : 'squarepin' 
		}
}

 

function getFlags(dates,symbol, description){
 	var data =[];
 
	var len = dates.length;
	console.log(len);
	for (var i = 0; i < len; i++) {
	var obj = {
			x : dates[i],
			title : symbol,
			text:description
			
		};
	data.push(obj);
	}
 
	return data;
	 
	}
 
function plotOHLCGraph(){
	bOHLC = true;
	 chart = new Highcharts.StockChart({
         chart : {
             renderTo : 'OHLCGraphContainer'
         },
         legend: getLegend(),
         rangeSelector : {
             selected : 2
         },

         title : {
             text : m_Stock.stockName
         },

         yAxis: [{
             title: {
                 text: 'OHLC'
             },
             height: 200,
             lineWidth: 2
             
         }, yAxisATR()
         ],
         
         series : [
                   getSerie('ohlc',  m_Stock.stockName ,  m_Stock.OHLC),  
                   getSerie('ohlc',  m_Stock.stockName + " Calculated",  m_Stock.calculatedOHLC), 
                   getATR()
         ]
     });
}

function plotCandlestickGraph(){
	bCandle = true;
	 chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'candlestickGraphContainer',
            alignTicks: false
        },
        legend: getLegend(),
        rangeSelector : {
            selected : 2
        },

        title : {
            text : m_Stock.stockName
        },
        yAxis: [{
            title: {
                text: 'Candle stick'
            },
            height: 200,
            lineWidth: 2
            
        }, yAxisATR()
        ],

        series : [
                  getSerie('candlestick',  m_Stock.stockName,  m_Stock.OHLC), 
                  getATR()
        ]
    });
}

function getSerie(graphType,graphName,graphData){
	return {
        type : graphType,
        name : graphName,
        data : graphData,
        
    };
}

function getSerie(graphType,graphName,graphData,graphId){
	return {
        type : graphType,
        name : graphName,
        data : graphData,
        id: graphId
    };
}


function getATR(){
	return {
		type : 'line',
		name :  "ATR",
		data :  m_Stock.ATR,
		yAxis:1
		}
}

function getLegend(){
return{
    align: "right",
    layout: "vertical",
    enabled: true,
    verticalAlign: "middle"
    
    };
}

function yAxisATR(){
	return  {
        title: {
            text: 'ATR'
        },
        
        height: 100,
        top: 300,
        lineWidth: 2
    } ;
}
